<template>
    <div>
                <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片试图 -->
    <el-card>
        <el-row>
            <el-col>
                <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
            </el-col>
        </el-row>
        <!-- 表格 -->
<tree-table class="treetablecss" :data="cateList" :columns="columns" 
:selection-type="false" :expand-type="false"
 :show-row-hover="false" border show-index index-text="#" >
<!-- 是否有效 -->
    <template slot="isok" slot-scope="scope">
    <i class="el-icon-success" v-if="scope.row.cat_deleted===false" style="color:green"></i>
     <i class="el-icon-error" v-else></i>
    </template>
    <!-- 排序 -->
    <template slot="order" slot-scope="scope">
        <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
        <el-tag  size="mini" type="success" v-else-if="scope.row.cat_level===1">二级</el-tag>
          <el-tag  size="mini"  type="warning" v-else>三级</el-tag>
    </template>
    <!-- 操作 -->
        <template slot="opt" slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-edit"
             @click="rewriteCateDialog(scope.row.cat_id,scope.row.cat_name)">编辑</el-button>
              <el-button size="mini" type="danger" icon="el-icon-delete"
             @click="delcat(scope.row)" >删除</el-button>
        </template>
</tree-table>
        <!-- 分页 -->
            <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[3, 5, 10, 15]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </el-card>
    <!-- 添加分类对话框 -->
    <el-dialog
    @closed='addCateDialogClosed'
  title="添加分类"
  :visible.sync="addCateDialogVisible"
  width="50%"
  >
  <!-- 添加分类表单 -->
 <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" 
 label-width="100px" >
  <el-form-item label="分类名称" prop="cat_name">
    <el-input v-model="addCateForm.cat_name"></el-input>
  </el-form-item>
  <el-form-item label="父级分类" >
      <!-- <!//options数据源 -->
      <el-cascader
   
      clearable
     
    v-model="selectedKeys"
    :options="parentList"
    :props="cascaderPros"
    @change="parentCateChanged">
    </el-cascader>
  </el-form-item> 

 </el-form>
<span slot="footer" class="dialog-footer">
      <el-button @click="addCateDialogVisible=false">取 消</el-button>
    <el-button type="primary" @click="addcate">确 定</el-button>
  </span>
</el-dialog>
<el-dialog
  title="编辑分类"
  :visible.sync="rewriteDialogVisible"
  width="30%"
  >
  
  <span>分类名称<el-input v-model="rewriteCat_name"></el-input></span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="rewriteDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="rewriteCatname">确 定</el-button>
  </span>
</el-dialog>
    </div>
</template>

<script>
export default {
          data(){
              return {
                  //查询条件
                  queryInfo:{
                      type:3,
                      pagenum:1,
                      pagesize:5

                  },
                  //商品分类列表
                  cateList:[],

                  //总数据条数
                  total:0,

                  columns:[
                      {
                          label:'',
                          prop:'cat_name'
                      },
                      {
                      label:'是否有效',
                      //表示，将当前列定义为模板列
                      type:'template',
                      //表示当前这一列使用模板的名称
                      template:'isok',
                      },{
                         label:'排序',
                      //表示，将当前列定义为模板列
                      type:'template',
                      //表示当前这一列使用模板的名称
                      template:'order',
                      },{
                             label:'操作',
                      //表示，将当前列定义为模板列
                      type:'template',
                      //表示当前这一列使用模板的名称
                      template:'opt',
                      }
                  ],
                  //控制添加对话框显示
                  addCateDialogVisible:false,
                  //添加分类表单数据对象
                  addCateForm:{
                        //将要添加的分类的名称
                        cat_name:'',
                        //父级分类id
                        cat_pid:0,
                        //等级
                        cat_level:0
                  },
                  addCateFormRules:{
                    cat_name:[{required:true,message:'请输入分类名称',trigger:'blur'}]  
                  },
                  //父级分类列表
                  parentList:[],
                  //指定级联选择器的配置对象
                  cascaderPros:{
                      checkStrictly:'true',
                      expandTrigger: 'hover',
                      value:'cat_id',
                      label:'cat_name',
                      children:'children'
                  },
                  //选择的父级的Id数组
                  selectedKeys:[],
                  //编辑分类
                  rewriteDialogVisible:false,
                  //
                  rewriteCat_name:'',
                  rewriteId:''

              }
          },
          created(){
              this.getCateList()
          },
          methods:{
              //获取分类商品数据
            async  getCateList(){ 
             const {data:res} =   await  this.$http.get('categories',{params:this.queryInfo})
              
              if(res.meta.status!==200){
                  return this.$message.error('获取商品分类失败')
              }
              //赋值catelist
              this.cateList=res.data.result
            //   console.log(this.cateList);
                //赋值总条数
              this.total=res.data.total
              },
              //监听pagesize变化
              handleSizeChange(newsize){
                  this.queryInfo.pagesize=newsize
                  this.getCateList()
              },
              //监听pagenum改变
              handleCurrentChange(newpage){
            this.queryInfo.pagenum=newpage
            this.getCateList()
              },
              //点击 展示对话框
              showAddCateDialog(){
                  //获取父级列表
                  this.getParentCateList()
                  //再展示对话框
                  this.addCateDialogVisible=true
              },
              //获取父级分类的数据列表
           async   getParentCateList(){
             const{data:res}=   await    this.$http.get('categories',{params:{type:2}})
             if(res.meta.status!==200){
                 return this.$message.error('获取父级分类列表失败')
             }
            // console.log(res.data);
            this.parentList=res.data
              },
              parentCateChanged(){
                //   console.log(this.selectedKeys);
                //父级分类Id
                if(this.selectedKeys.length>0){
                this.addCateForm.cat_pid= this.selectedKeys[this.selectedKeys.length-1]
                //为当前分类的等级赋值
                this.addCateForm.cat_level=this.selectedKeys.length
                }else{
                    //父级分类Id
                    this.addCateForm.cat_pid=0
                    //为当前分类的等级赋值
                    this.addCateForm.cat_level=0
                }
              },
              //点击按钮,添加分类
           addcate(){
                this.$refs.addCateFormRef.validate(async valid=>{
                    if(!valid) return
         const{data:res}= await  this.$http.post('categories',this.addCateForm)
         if(res.meta.status!==201){
             return this.$message.error('添加分类失败')   
         }

         this.$message.success('添加成功')
         this.getCateList()
         this.addCateDialogVisible=false

                })
              },
              //关闭重置表单
              addCateDialogClosed(){
                  this.$refs.addCateFormRef.resetFields()
                  this.selectedKeys=[]
                  this.addCateForm.cat_level=0
                  this.addCateForm.cat_pid=0
              },
              //编辑分类
      rewriteCateDialog(id,cat_name){
               this.rewriteCat_name=cat_name
                this.rewriteId=id
        
      
               this.rewriteDialogVisible=true
              },
              //确定编辑
                  async    rewriteCatname(){
                      if(this.rewriteCat_name.trim()==''){
                          return this.$message.error('分类内容不能空')
                      }
                     
             const{data:res}= await this.$http.put(
                 'categories/'+this.rewriteId,{cat_name:this.rewriteCat_name})
               if(res.meta.status!==200){
                   return this.$message.error('编辑分类失败')
               }
                 this.$message.success('编辑分类成功')
         this.getCateList()
          this.rewriteDialogVisible=false
                 
              },
              //删除分类
             delcat(catInfo){
              this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
        const {data:res} =   await  this.$http.delete('categories/'+catInfo.cat_id)
        console.log(res);
        this.getCateList()
          this.$message.success('删除成功')})
        .catch(() => {
            console.log(2);
          this.$message.info('取消删除')          
        });
              }
        

          }    
}
</script>

<style lang="less" scoped>
.treetablecss{
    margin-top: 15px;
}
.el-cascader{
    width: 100%;
}
</style>
